<!--
 * @Description: 业务员表单弹窗
-->
<template>
  <a-drawer :title="formTitle" :open="visible" @close="onClose">
    <template #closeIcon>
      <div class="express-bar"></div>
      <div class="express-btn">
        <CloseCircleOutlined :size="32" @click="onClose" />
      </div>
    </template>
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ sm: 4, lg: 6 }">
      <a-card title="基本信息" class="smart-margin-bottom10">
        <a-row :gutter="{ sm: 8, md: 16, lg: 24 }">
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="姓名" name="rename">
              <a-input v-model:value="form.rename" placeholder="请输入姓名" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="年龄" name="age">
              <a-input v-model:value="form.age" placeholder="请输入年龄" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="性别" name="sex">
              <a-radio-group v-model:value="form.sex" button-style="solid">
                <a-radio-button value="1">男</a-radio-button>
                <a-radio-button value="2">女</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="联系电话" name="phone">
              <a-input v-model:value="form.phone" placeholder="请输入联系电话" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="身份证号" name="id_card">
              <a-input v-model:value="form.id_card" placeholder="请输入身份证号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="身份证地址" name="address">
              <a-input v-model:value="form.address" placeholder="请输入身份证地址" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="现居住地" name="live_address">
              <a-input v-model:value="form.live_address" placeholder="请输入现居住地" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="邮箱" name="email">
              <a-input v-model:value="form.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>
          <!-- <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="修改价格" name="modify_price_authority">
              <a-radio-group v-model:value="form.modify_price_authority" button-style="solid">
                <a-radio-button value="1">是</a-radio-button>
                <a-radio-button value="0">否</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col> -->
        </a-row>
      </a-card>
      <a-card title="账号信息">
        <a-row :gutter="{ sm: 8, md: 16, lg: 24 }">
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="用户名" name="username">
              <a-input v-model:value="form.username" placeholder="请输入用户名" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="密码" name="password">
              <a-input v-model:value="form.password" placeholder="请输入密码" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="头像" name="head_img">
              <FileUpload v-model:value="form.head_img" :default-file-list="form.head_img" buttonText="上传头像" :maxUploadSize="1" :maxSize="1" accept=".jpeg,.jpg,.png" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
    <template #footer>
      <div class="smart-table-operate-block">
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script setup lang="ts">
import _ from 'lodash'
import { message } from 'ant-design-vue'
import { useLoadingStore } from '@/store/modules/loading-store'
import FileUpload from '@/components/support/file-upload/index.vue'
import { errorSentry } from '@/lib/error-sentry'
import { salesmanApi } from '@/api/business/data/salesman-api'
const loadingStore = useLoadingStore()
// emit
const emit = defineEmits(['reload-list'])

// 组件ref
const formRef = ref()

const formDefault = {
  // 姓名
  rename: '',
  // 年龄
  age: '',
  // 性别
  sex: '1',
  // 联系电话
  phone: '',
  // 身份证号
  id_card: '',
  // 身份证地址
  address: '',
  // 现居住地
  live_address: '',
  // 邮箱
  email: '',
  // 修改价格
  // modify_price_authority: '0',
  // 账号信息
  // 用户名
  username: '',
  // 密码
  password: '',
  // 头像
  head_img: ''
}

const form = ref({ ...formDefault })
const rules = {
  rename: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: 'blur'
    }
  ],
  // modify_price_authority: [{ required: true, message: '请输入修改价格', trigger: 'blur' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
}
// 是否展示抽屉
const visible = ref(false)

function showDrawer(rowData) {
  form.value = _.cloneDeep(formDefault)
  if (rowData && !_.isEmpty(rowData)) {
    form.value = _.pick(rowData, ['id', ...Object.keys(formDefault)])
  }
  visible.value = true
  nextTick(() => {
    formRef.value.clearValidate()
  })
}

function onClose() {
  form.value = formDefault
  visible.value = false
}

function onSubmit() {
  formRef.value
    .validate()
    .then(async () => {
      loadingStore.show()
      try {
        if (unref(form).id) {
          await salesmanApi.editSalesman(unref(form))
        } else {
          await salesmanApi.addSalesman(unref(form))
        }
        message.success('操作成功')
        onClose()
        emit('reload-list')
      } catch (error) {
        message.error(error.msg)
        errorSentry.captureError(error)
      } finally {
        loadingStore.hide()
      }
    })
    .catch((error) => {
      console.log('error', error)
      message.error('参数验证错误，请仔细填写表单数据!')
    })
}

defineExpose({
  showDrawer
})

// 表单标题
const formTitle = computed(() => (form.value.id ? '编辑' : '新增'))
</script>
